<template>
  <!-- <div>
    <svg width="65px" height="35px" viewBox="0 0 65 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <polygon id="path1" fill="#B8BF46" points="35.6433157 6.14315313 35.6461344 -4.54747351e-13 50.3867268 -4.54747351e-13 57.3337645 16.7500307 38.4267909 18.0429438"></polygon>
      <polygon id="main" fill="#E8F24D" points="35.550985 0 52.3867268 0 64.6433157 29.5519112 0.175501199 29.5519112 0.175501199 17.7582331 40.3795455 17.7582331"></polygon>
      <polygon id="shadow" fill="#B8BF46" points="0 29.5519112 64.6433157 29.5519112 64.6433157 34.5519112 0 34.5519112"></polygon>
    </svg>
  </div> -->
  <div class="road">
    <div class="road-side road-left"></div>
    <div class="road-side road-right"></div>
  </div>

</template>

<script setup>
  import gsap from 'gsap';
import { onMounted } from 'vue';
  function animateFun() {
    gsap.fromTo('.road-side', 
    {
      y: -10
    },
    {
      y: 10
    },
    ).repeat(-1)
  }
  onMounted(animateFun)

</script>

<style lang="scss" scoped>
$arrowSvg: "./arrow.svg";
.road {
  position: relative;
  width:400px;
  height: 600px;
  transform: rotate(-60deg);
  overflow: hidden;
  .road-side {
    position: absolute;
    height: 100%;
    top: 0;
    bottom: 0;

    width: 20px;
    background-image: url($arrowSvg);
    background-repeat: repeat;
    background-size: contain;
  &.road-left {
    left: 0;
    transform: rotate(10deg);
  }
  &.road-right {
    right: 0;
    transform: rotate(-3deg);
  }
}

}
</style>